<template>
  <view class="custom-kind" @tap="choose">
    <view class="custom-one" :style="choseValue == 'choseone'?mapStyle:normalStyle"  data-index="choseone" ref="choseone" value="choseone">优质 35</view>
    <view class="custom-one" :style="choseValue == 'chosetwo'?mapStyle:normalStyle" data-index="chosetwo"   ref="chosetwo" value="chosetwo">待维护 25848</view>
    <view class="custom-one" :style="choseValue == 'chosethree'?mapStyle:normalStyle"  data-index="chosethree" ref="chosethree" value="chosethree">无感知 48</view>
  </view>
</template>

<script>
    export default {
        data() {
            return {
                mapStyle:'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
                normalStyle:'',
                choseValue:'',
            }
        },
        methods: {
            choose(e){
                let value = e.target.dataset.index
                this.choseValue = value;
                this.$emit("choose",value);

            }
        }
    }
</script>

<style>
  .custom-kind{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 54rpx 44rpx 0 44rpx;
    padding-bottom: 42rpx;
  }
  .custom-one{
    background:rgba(255,241,240,1);
    border-radius:8rpx;
    font-size:28rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,97,44,1);
    padding: 10rpx 28rpx 10rpx 28rpx;
  }
  .active{
    background:rgba(255,97,44,1);
    color:rgba(255,255,255,1);
  }
</style>
